<!doctype html>
<html> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
 <!--   <link rel="stylesheet" type="text/css" href="./css/api.css"/> 

    <link rel="stylesheet" type="text/css" href="./css/iconfont.css"> -->
	
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>

    <style>
		html,body {height:100%;background-color:#fff; }
		.hover{ opacity: .8; }
		.flex-wrap{ display: -webkit-box;	display: -webkit-flex;	display: flex; }
		.flex-con{     -webkit-box-flex: 1;     -webkit-flex: 1;    flex: 1; font-size:12px;color: #543e3e;}
		.flex-vertical{ -webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;}
		#wrap{ height: 100%;}
        header{ background: linear-gradient(to right,#f370af 0,#5515ee 100%); } 
        header ul li { height: 44px; line-height: 44px; text-align: center; display: none; color: #fff; position: relative;font-size: 0.9rem;  }
        header ul li.active{ display: block; }


.flex-con{
          overflow: auto;
          background-color:#fff;
        }
		
		
		
	.aui-navBar {
    height: 44px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 1002;
    background: #f6f6f6;
}
	
.tab-nav {
    height: 44px;
    line-height: 44px;
    display: block;
    position: relative;
    background: #fff;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
}


.tab-nav-item.tab-active:before {
    content: '';
    width: 20%;
    height: 3px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -10%;
    z-index: 4;
    background-image: -webkit-gradient(linear,left top,right top,from(#ff6143),to(#ff1767));
    background-image: -webkit-linear-gradient(left,#ff6143,#ff1767);
    background-image: -moz-linear-gradient(left,#ff6143,#ff1767);
    background-image: linear-gradient(to right,#ff6143,#ff1767);
    background-color: #ff6143;
}


		
.tab-nav-item {
    height: 44px;
    line-height: 44px;
    position: relative;
    text-align: center;
    color: #585858;
    font-size: 0.9rem;
    display: block;
    float: left;
    width: 20%;
}

.tab-nav-item.tab-active {
    /* background-color: #51bd03; */
}

.tab-nav-item.tab-active a {
    color: #ff1767;
    font-size: 0.6rem;
}

.tab-nav-item a {
    display: inherit;
    font-size: 0.6rem;
    color: #666;
}
.aui-navBar {
    height: 44px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 1002;
    background: #fff;
}		
.b-line:after {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #e2e2e2;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}		








.aui-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px  15px 5px 15px;
    position: relative;
	background: #fff;
}


.aui-flex-box {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #333;
}

.aui-head-user {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 100%;
    float: left;
}
.aui-head-user img {
    width: 100%;
    height: auto;
    display: block;
    border: 0;
}

.aui-head-title {
    float: left;
}

.aui-head-title h2 {
    color: #333333;
    font-size: 0.6rem;
    line-height: 25px;
    padding-left: 0.3rem;
}


.aui-head-title h2 em {
    background: #000;
    color: #fff;
    font-style: normal;
    font-weight: normal;
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

.aui-icon-box {
    overflow: hidden;
    font-size: 0.7rem;
}

.aui-icon-box em {
    font-style: normal;
    float: left;
    margin-left: 1.5rem;
}

.icon {
    width: 20px;
    height: 20px;
    display: block;
    border: none;
    float: left;
    background-size: 20px;
    background-repeat: no-repeat;
}

.icon-zun {
    background-image: url();
}


.icon-cio {
    background-image: url();
}






    </style>

</head>
<body>



<div id="wrap" class="flex-wrap flex-vertical">
    <header>
        <ul>

            <li class="border-b active" > 
			<img src="" style="position: absolute;width: 1rem;top: 0.6rem;left: 0.5rem;" onclick="toHelp()">
			更多视频  
			<img src="" style="position: absolute;width: 1rem;top: 0.6rem;right: 0.5rem;" onclick="toShezhi()"> </li>
  </ul>
  
    
  
  
  
  
  <div class="aui-flex">
			<div class="aui-flex-box">
				<div class="aui-head-user"  id="userlogo">
					 <img src=""  style="box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);" >
				</div>
				<div class="aui-head-title">
					<h2><span id="isusername"> </span> <em  id="isuservip_ico" > 未知 </em></h2>
				</div>
			</div>
			<div class="aui-icon-box">
				<em><i class="icon icon-zun"></i><span id="money">0</span></em>
				<em><i class="icon icon-cio"></i><span id="sign">0</span></em>
			</div>
		</div>
  
  

  
  <span class="aui-navBar aui-navBar-fixed">
                <ul class="tab-nav b-line">
                    <li class="tab-nav-item tab-active"  id="zero">
                        <a>
                            <span>动作</span>
                        </a>
                    </li>
                    <li class="tab-nav-item"   id="one">
                        <a>
                            <span>喜剧</span>
                        </a>
                    </li>
					
					
                    <li class="tab-nav-item"   id="two">
                        <a>
                            <span>科幻</span>
                        </a>
                    </li>
					
					
                    <li class="tab-nav-item"   id="three">
                        <a>
                            <span>惊悚</span>
                        </a>
                    </li>
					
					
                    <li class="tab-nav-item"   id="four">
                        <a>
                            <span>美女</span>
                        </a>
                    </li>
					
					
                </ul>
            </span>

  
    </header>





    <div id="main" class="flex-con">    </div>


</div>


</body>
</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.js"></script>
<script type="text/javascript">
    var api_url = localStorage.getItem('api_url');
    var uid  =  '';
    apiready = function () {

        $api.fixStatusBar( $api.dom('header') );
		
		
        api.setStatusBarStyle({
            style: 'dark',
            color: 'rgba(0,0,0,0)'
        });
		


        funIniGroup();
		
		
		
		
			// 网络状态
		api.addEventListener({
			name:'offline'
		}, function(ret, err){        

			api.toast({
			msg : '网络连接异常',
			duration : 5000,
			location : 'middle' 
			});

			  

		});

		api.addEventListener({
			name:'online'
		}, function(ret, err){        
		
			  api.toast({
			  msg : '已经连接网络',
			  duration : 2000,
			  location : 'middle' 
			  });
				  

     funIniGroup();

				  
		});
	
		
		
		
		
		
		
		
		

		$api.fixStatusBar( $api.byId('header') );


							sign.innerHTML = localStorage.getItem('sign') ;  //积分
							money.innerHTML = localStorage.getItem('money');//余额


												if (localStorage.getItem('userlogo_Cache') !== ''&& localStorage.getItem('userlogo_Cache') !== null ){			//  如果头像不为空	  
												 
												
														userlogo.innerHTML = '<img src="data:image/png;base64,'+ localStorage.getItem('userlogo_Cache') + '" style="box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);">' ;	
												
												
												}else {	
															if (localStorage.getItem('headimgurl') !== ''){			//  如果头像不为空

																userlogo.innerHTML = ' <img src="'+ localStorage.getItem('headimgurl') + '" style="box-shadow: 0 2px 6px 0 rgba(0,0,0,0.3);">' ;
																
															}
												}
								
								


																		
							if (localStorage.getItem('nick_name') !== ''){
																		 
									/* 昵 称 */		isusername.innerHTML = '' + localStorage.getItem('nick_name'); 	
																		
																		
								}else{
																
									/*用 户 名*/	isusername.innerHTML = '' + localStorage.getItem('user_name'); 		
																		
							}							
							
							

							//会员时间判断
							if(localStorage.getItem('user_time') == "-1" ) {          //如果用时间值等于-1（永久会员）
								
									/*会员图标*/		isuservip_ico.innerHTML = '<span class="iconvip" > 永久会员 </span>';
		
							}else if(localStorage.getItem('user_time') > timestamp) {            		 //如果用时间大于当前时间（会员）

									/*会员图标*/		isuservip_ico.innerHTML = '<span class="iconvip" > 超级会员 </span>';

							}else if(localStorage.getItem('user_time') < timestamp) {             		 //如果用时间小于当前时间（已经过期）
								
									/*会员图标*/		isuservip_ico.innerHTML = '<span class="iconvip" > VIP已过期 </span>';


							}


    }











    function funIniGroup(){
	
	
        var eHeaderLis = $api.domAll('header li'),
            frames = [];


			/*   循环方法
        for (var i = 0,len = eHeaderLis.length; i < len; i++) {

            frames.push( {
                name: 'frame'+i,
                url: './html/frame'+i+'.html',
                bgColor : '#f5f5f5',
                bounces:false       //  这里  false  禁止下拉    true 可以下拉

            } )

        }
		*/



		/* 循环方法2
		  for (var i = 0,len = eHeaderLis.length; i < len; i++) {
            if(i==0)
            {
               frames.push({
                name: 'h5',
                url: './html/h5.html',
                bgColor : '#f5f5f5',
                bounces:true
               })
            }
            else
            {
                frames.push({
                name: 'frame'+i,
                url: './html/frame'+i+'.html',
                bgColor : '#f5f5f5',
                bounces:true
               })
            }


        }

		*/

					//指定

					frames[0]={	
                            name: 'video_classification_action_frm',		//动作
                            url: './video_classification/video_classification_action_frm.html',    
							bgColor:'#fff',    //（可选项）背景色，支持图片和颜色，格式为#fff、#ffffff、rgba(r,g,b,a)等，图片路径支持fs://、widget://等APICloud自定义文件路径协议，同时支持相对路径
                            bounces:false     //（可选项）是否弹动，布尔型，默认值：若在 config.xml 里面配置了pageBounce，则默认值为配置的值，否则为true。注意如果页面使用了上拉、下拉刷新等功能，该属性可能会被刷新组件重新设置。
							
                        };
                    frames[1]={
                            name: 'video_classification_comedy_frm',    	//喜剧
                            url: './video_classification/video_classification_comedy_frm.html',
							bgColor:'#fff',    //（可选项）背景色，支持图片和颜色，格式为#fff、#ffffff、rgba(r,g,b,a)等，图片路径支持fs://、widget://等APICloud自定义文件路径协议，同时支持相对路径
                            bounces:false     //（可选项）是否弹动，布尔型，默认值：若在 config.xml 里面配置了pageBounce，则默认值为配置的值，否则为true。注意如果页面使用了上拉、下拉刷新等功能，该属性可能会被刷新组件重新设置。
							
                    };
                    frames[2]={
                            name: 'video_classification_science_frm',  	//科幻
                            url: './video_classification/video_classification_science_frm.html',
                            bgColor : 'rgba(255,255,255,0)',
                            bounces:false
                    };
                    frames[3]={
                            name: 'video_classification_terror_frm',	// 惊悚
                            url: './video_classification/video_classification_terror_frm.html',
							bgColor:'#fff',    //（可选项）背景色，支持图片和颜色，格式为#fff、#ffffff、rgba(r,g,b,a)等，图片路径支持fs://、widget://等APICloud自定义文件路径协议，同时支持相对路径
                            bounces:false     //（可选项）是否弹动，布尔型，默认值：若在 config.xml 里面配置了pageBounce，则默认值为配置的值，否则为true。注意如果页面使用了上拉、下拉刷新等功能，该属性可能会被刷新组件重新设置。
							
                          };
								
                    frames[4]={
                            name: 'video_classification_mn_frm',
                            url: './video_classification/video_classification_mn_frm.html',
							bgColor:'#fff',    //（可选项）背景色，支持图片和颜色，格式为#fff、#ffffff、rgba(r,g,b,a)等，图片路径支持fs://、widget://等APICloud自定义文件路径协议，同时支持相对路径
                            bounces:false     //（可选项）是否弹动，布尔型，默认值：若在 config.xml 里面配置了pageBounce，则默认值为配置的值，否则为true。注意如果页面使用了上拉、下拉刷新等功能，该属性可能会被刷新组件重新设置。
							
                          };



        api.openFrameGroup({
            name: 'group',
            scrollEnabled: true,        //  这里  false  禁止左右滑动    true 可以 
			
			
         //   preload : 0,  //数据加载未完成时，加载动画
            rect: {
                x: 0,
                y: $api.dom('header').offsetHeight,
                w: api.winWidth,
                h: $api.dom('#main').offsetHeight
            },
            index: 0,
            frames: frames
        }, function (ret, err) {


		if(ret.index ==0){
		
									var obj = document.getElementById("zero");
									obj.setAttribute("class", "tab-nav-item tab-active");
									
									var obj = document.getElementById("one");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("two");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("three");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("four");
									obj.setAttribute("class", "tab-nav-item");

		}else if(ret.index ==1){
		
									var obj = document.getElementById("zero");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("one");
									obj.setAttribute("class", "tab-nav-item tab-active");
									
									var obj = document.getElementById("two");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("three");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("four");
									obj.setAttribute("class", "tab-nav-item");
		
		}else if(ret.index ==2){
									var obj = document.getElementById("zero");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("one");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("two");
									obj.setAttribute("class", "tab-nav-item tab-active");
									
									var obj = document.getElementById("three");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("four");
									obj.setAttribute("class", "tab-nav-item");
		
		}else if(ret.index ==3){
									var obj = document.getElementById("zero");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("one");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("two");
									obj.setAttribute("class", "tab-nav-item ");
									
									var obj = document.getElementById("three");
									obj.setAttribute("class", "tab-nav-item tab-active");
									
									var obj = document.getElementById("four");
									obj.setAttribute("class", "tab-nav-item");
		
		}else if(ret.index ==4){
									var obj = document.getElementById("zero");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("one");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("two");
									obj.setAttribute("class", "tab-nav-item ");
									
									var obj = document.getElementById("three");
									obj.setAttribute("class", "tab-nav-item");
									
									var obj = document.getElementById("four");
									obj.setAttribute("class", "tab-nav-item tab-active");
		
		}


// alert( JSON.stringify( ret.index ) );




        });






    }

  function toBanner(url){

    if (url == '') {

	//如果后台填写的跳转链接为空 则无任何操作

    }else{
	
	
	/*
				var str = url ;

				if(str.indexOf("widget://")>-1){   //如果包含 widget://  则执行内部页面跳转


								var str = url;
								var Internal_jump = str.split("widget://html/").join("");
								console.log(Internal_jump);    // 剔除 widget://html/ 后把结果给 Internal_jump
								
								
					　　		api.openWin({
								name: 'Internal_jump',
								url: Internal_jump
								}); 		

*/

/* 

设置中心  widget://html/shezhi_win.html
我的佣金  widget://html/yongjin_win.html
佣金明细  widget://html/yongjinlog_win.html
私人视频  widget://html/video_secret_win.html
升级会员  widget://html/upgrade_vip_win.html
直播专题  widget://html/tv_special_win.html
我的团队  widget://html/tuandui_win.html
提现记录  widget://html/tixianlog_win.html
邀请好友  widget://html/share_win.html
搜索页面  widget://html/search_win.html
观看记录  widget://html/look_record_win.html
我的积分  widget://html/jifen_win.html
帮助中心  widget://html/help_win.html
我的激活码  widget://html/gokalog_win.html
游戏直播间  widget://html/game_zhubo_list_win.html
公告列表  widget://html/artical_win.html
专属客服  widget://html/setup/customer_service_win.html




*/

				if(url == '设置中心'){
					
					api.openWin({
						name: 'shezhi_win',
						url: 'widget://html/shezhi_win.html',
						delay: 300
					});		

				}else if(url == '我的佣金'){
					
					api.openWin({
						name: 'yongjin_win',
						url: 'widget://html/yongjin_win.html',
						delay: 300
					});		
				}else if(url == '佣金明细'){
					
					api.openWin({
						name: 'yongjinlog_win',
						url: 'widget://html/yongjinlog_win.html',
						delay: 300
					});		
				}else if(url == '私人视频'){
					
					api.openWin({
						name: 'video_secret_win',
						url: 'widget://html/video_secret_win.html',
						delay: 300
					});		
				}else if(url == '升级会员'){
					
					api.openWin({
						name: 'upgrade_vip_win',
						url: 'widget://html/upgrade_vip_win.html',
						delay: 300
					});		
				}else if(url == '直播专题'){
					
					api.openWin({
						name: 'tv_special_win',
						url: 'widget://html/tv_special_win.html',
						delay: 300
					});		
				}else if(url == '我的团队'){
					
					api.openWin({
						name: 'tuandui_win',
						url: 'widget://html/tuandui_win.html',
						delay: 300
					});		
				}else if(url == '提现记录'){
					
					api.openWin({
						name: 'tixianlog_win',
						url: 'widget://html/tixianlog_win.html',
						delay: 300
					});		
				}else if(url == '邀请好友'){
					
					api.openWin({
						name: 'share_win',
						url: 'widget://html/share_win.html',
						delay: 300
					});		
				}else if(url == '搜索页面'){
					
					api.openWin({
						name: 'search_win',
						url: 'widget://html/search_win.html',
						delay: 300
					});		
				}else if(url == '观看记录'){
					
					api.openWin({
						name: 'look_record_win',
						url: 'widget://html/look_record_win.html',
						delay: 300
					});		
				}else if(url == '我的积分'){
					
					api.openWin({
						name: 'jifen_win',
						url: 'widget://html/jifen_win.html',
						delay: 300
					});		
				}else if(url == '帮助中心'){
					
					api.openWin({
						name: 'help_win',
						url: 'widget://html/help_win.html',
						delay: 300
					});		
				}else if(url == '我的激活码'){
					
					api.openWin({
						name: 'gokalog_win',
						url: 'widget://html/gokalog_win.html',
						delay: 300
					});		
				}else if(url == '游戏直播间'){
					
					api.openWin({
						name: 'game_zhubo_list_win',
						url: 'widget://html/game_zhubo_list_win.html',
						delay: 300
					});		
				}else if(url == '公告列表'){
					
					api.openWin({
						name: 'artical_win',
						url: 'widget://html/artical_win.html',
						delay: 300
					});		
				}else if(url == '专属客服'){
					
					api.openWin({
						name: 'customer_service_win',
						url: 'widget://html/setup/customer_service_win.html',
						delay: 300
					});		


				}else{       // 否则执行正常H5页面跳转
				
							//	api.toast({
							//	msg: url
							//	});
			
			
			
			                api.openWin({
                            name: 'h5',
                            url: './html/h5.html',
                            pageParam: {
                                 url: url
								}
                             });

			
				}
	
			
			
	}
  }





			//////////////////////    全网影视图标获取  方法  getMovies  S  //////////////////////
		function getIndex_right() {
		
			var Index_right_list = $api.byId('Index_right_list');
			var Index_right_template = $api.byId('Index_right_template');
			
			api.ajax({
				url: api_url+'/login/login/Index_right.html',    // 调用数量限制
				method: 'get',              
				data: {
                  values: {
			key: 'qq166098756',   //安全码
                  }
              }
			}, function(ret, err) {
				if(ret) {
					//alert( JSON.stringify( ret ) );
					var pagefn = doT.template(Index_right_template.text);
					Index_right_list.innerHTML = pagefn(ret);
					api.hideProgress();

				} else {
					api.hideProgress();
					//alert( JSON.stringify( err ) );
				}
			});
		}
		
		//////////////////////    全网影视图标获取  方法  getMovies  E  //////////////////////






    function toHelp(){


						api.openWin({
						name: 'help_win',
						url: 'widget://html/help_win.html',
				//	delay: 300,
											
						
				bounces: false,
				slidBackEnabled: true,
				bgColor: '#fff',
				animation: {
					type: "fade", //动画类型（详见动画类型常量） 
					subType: "from_top", //动画子类型（详见动画子类型常量）
				//	duration: 400
				},
				vScrollBarEnabled: false
						
					
					
				});		

    }





    function toShezhi(){


        api.openWin({
            name: 'shezhi_win',
            url: 'widget://html/shezhi_win.html', 
        });
		


    }







    // 随意切换按钮
    function randomSwitchBtn( tag ) {
        if( tag == $api.dom('#footer li.active') )return;
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('header li'),
            index = 0;

			
        for (var i = 0,len = eFootLis.length; i < len; i++) {
            if( tag == eFootLis[i] ){
                index = i;
            }else{
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
        $api.addCls( eFootLis[index], 'active');
        $api.addCls( eHeaderLis[index], 'active');
        api.setFrameGroupIndex({
            name: 'group',
            index: index

        });


    }










</script>
